<template>
  <div class="app-container">
    <el-collapse-transition>
      <el-card v-show="isFilterVisible" class="search-wrapper">
        <el-form :model="queryParams" :inline="true" label-width="100px">
          <div class="form-row">
            <el-form-item label="项目名称:">
              <el-input
                v-model="selAccountListQuery.PName"
                clearable
                style="width: 177px"
                placeholder="请输入平台类型"
              />
            </el-form-item>
            <el-form-item label="客户单位:">
              <!-- <el-select
                clearable
                style="width: 177px"
                @change="handleCustomerChange"
                v-model="selAccountListQuery.customer"
                placeholder="请选择客户单位"
              >
                <el-option
                  v-for="item in customerUnits"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select> -->
              <el-input
                v-model="selAccountListQuery.customer"
                clearable
                style="width: 177px"
                placeholder="请输入客户单位"
              />
            </el-form-item>
            <el-form-item label="合同编码:">
              <el-input
                v-model="selAccountListQuery.no"
                clearable
                style="width: 177px"
                placeholder="请输入合同编码"
              />
            </el-form-item>
            <el-form-item label="是否到账:">
              <el-select
                v-model="selAccountListQuery.isAccount"
                clearable
                placeholder="请选择"
                style="width: 177px"
                @change="handleAccountStatusChange"
              >
                <el-option
                  v-for="item in accountOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </div>
        </el-form>
      </el-card>
    </el-collapse-transition>

    <el-card>
      <div>
        <!-- 顶部操作按钮 -->
        <div class="operation-container">
          <el-button
            type="primary"
            size="small"
            class="filter-trigger"
            @click="isFilterVisible = !isFilterVisible"
            >{{ isFilterVisible ? "收起" : "检索" }}
            <i
              :class="['el-icon-arrow-down', { 'is-reverse': isFilterVisible }]"
            />
          </el-button>
          <el-button
            type="success"
            size="small"
            icon="el-icon-download"
            @click="handleExportExcel"
            >导出</el-button
          >
        </div>

        <!-- 表格 -->
        <el-table
          v-loading="loading"
          :data="accountFillList"
          border
          style="width: 100%"
          max-height="650px"
        >
          <el-table-column type="selection" width="40" />
          <el-table-column
            type="index"
            label="序号"
            width="60"
            align="center"
          />
          <el-table-column
            prop="no"
            label="合同编号"
            width="100"
            align="center"
          />
          <el-table-column
            prop="pname"
            label="项目名称"
            min-width="230"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="customer"
            label="客户单位"
            min-width="230"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="salesman"
            label="项目负责人"
            width="100"
            align="center"
          />
          <el-table-column
            prop="money"
            label="合同金额"
            width="100"
            align="center"
          />
          <el-table-column
            label="到账金额"
            align="center"
            width="100"
            prop="receiveMoney"
          >
            <!-- <template> -->
            <!-- {{
                  accountDetailData.length
                    ? accountDetailData.reduce(
                        (sum, item) => sum + Number(item.receiveMoney || 0),
                        0
                      )
                    : 0
                }} -->
            <!-- </template> -->
            <template slot-scope="scope">
              {{ scope.row.receiveMoney || "0" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="kpMoney"
            label="开票金额"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.kpMoney || "0" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              {{ formatCreateTime(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="180"
            fixed="right"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                style="color: #409eff"
                @click="handleView(scope.row)"
                >查看详情</el-button
              >
              <el-button
                type="text"
                style="color: #67c23a"
                @click="openAccountDialog(scope.row)"
                >到账</el-button
              >
              <el-button
                type="text"
                style="color: #67c23a"
                @click="openInvoiceDialog(scope.row)"
                >开票</el-button
              >
              <el-button
                type="text"
                style="color: #409eff"
                @click="handleAccountDetail(scope.row.id)"
                >到账详情</el-button
              >
              <el-button
                type="text"
                style="color: #409eff"
                @click="handleInvoiceDetail(scope.row.id)"
                >开票详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row style="margin-top: 20px" type="flex" justify="end">
          <el-pagination
            background
            :page-sizes="[10, 20, 30, 40, 50]"
            :current-page="selAccountListQuery.page"
            :page-size="selAccountListQuery.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </div>
    </el-card>

    <!-- 到账填写弹框 -->
    <el-dialog
      title="到账填写"
      :visible.sync="accountDialogVisible"
      width="500px"
      @closed="handleAccountDialogClosed"
    >
      <el-form
        ref="accountFormRef"
        :model="accountForm"
        :rules="accountRules"
        label-width="100px"
      >
        <el-form-item label="项目金额" class="form-item">
          <span class="amount-text">{{
            accountAmountList ? accountAmountList.money : 0
          }}</span>
        </el-form-item>

        <el-form-item label="已到金额" class="form-item">
          <span class="amount-text">{{ accountAmountList.receiveMoney }}</span>
        </el-form-item>

        <el-form-item label="到账金额" prop="money" class="form-item">
          <el-input
            v-model="accountForm.money"
            style="width: 100%"
            placeholder="请输入到账金额"
          />
        </el-form-item>

        <el-form-item label="备注" prop="remark" class="form-item">
          <el-input
            v-model="accountForm.remark"
            type="textarea"
            :rows="4"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="accountDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAccountSubmit">确定</el-button>
      </div>
    </el-dialog>

    <!-- 开票填写弹框 -->
    <el-dialog
      title="开票填写"
      :visible.sync="invoiceDialogVisible"
      width="500px"
    >
      <el-form
        ref="invoiceFormRef"
        :model="invoiceForm"
        :rules="invoiceRules"
        label-width="100px"
      >
        <el-form-item label="项目金额" class="form-item">
          <span class="amount-text">{{
            currentRow ? currentRow.money : 0
          }}</span>
        </el-form-item>

        <el-form-item label="已开票金额" class="form-item">
          <span class="amount-text">{{
            currentRow ? currentRow.kpMoney : 0
          }}</span>
        </el-form-item>

        <el-form-item label="开票金额" prop="money" class="form-item">
          <el-input
            v-model="invoiceForm.money"
            style="width: 100%"
            placeholder="请输入开票金额"
          />
        </el-form-item>

        <el-form-item label="备注" prop="remark" class="form-item">
          <el-input
            v-model="invoiceForm.remark"
            type="textarea"
            :rows="4"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="invoiceDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleInvoiceSubmit">确定</el-button>
      </div>
    </el-dialog>

    <!-- 到账详情弹窗 -->
    <el-dialog
      title="到账详情"
      :visible.sync="accountDetailDialogVisible"
      width="800px"
      class="full-height-dialog"
    >
      <div>
        <el-table :data="accountDetailData" style="width: 100%" border>
          <el-table-column
            prop="prop"
            label="序号"
            width="100"
            type="index"
            align="center"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              {{ formatCreateTime(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="money"
            label="到账金额(元)"
            width="width"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.money || "0" }}
            </template>
          </el-table-column>
          <el-table-column
            prop="user"
            label="项目负责人"
            width="width"
            align="center"
          />
          <el-table-column
            prop="remark"
            label="备注"
            width="width"
            align="center"
          />
        </el-table>
      </div>
      <div slot="footer">
        <el-button @click="accountDetailDialogVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <!-- 开票详情弹窗 -->
    <el-dialog
      title="开票详情"
      :visible.sync="invoiceDetailDialogVisible"
      width="800px"
      class="full-height-dialog"
    >
      <div>
        <el-table :data="invoiceDetailData" style="width: 100%" border>
          <el-table-column
            prop="prop"
            label="序号"
            width="100"
            type="index"
            align="center"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              {{ formatCreateTime(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="money"
            label="到账金额(元)"
            width="width"
            align="center"
          />
          <el-table-column
            prop="user"
            label="项目负责人"
            width="width"
            align="center"
          />
          <el-table-column
            prop="remark"
            label="备注"
            width="width"
            align="center"
          />
        </el-table>
      </div>
      <div slot="footer">
        <el-button @click="invoiceDetailDialogVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <!-- 查看详情弹框 -->
    <el-dialog
      :visible.sync="detailDialogVisible"
      width="87%"
      title="查看详情"
      custom-class="full-height-dialog"
    >
      <div id="printArea" class="dialog-content-wrapper">
        <div class="collapse-header">
          <h3>北仑区传媒中心经营项目立项</h3>
        </div>
        <el-card>
          <div>
            <div class="detail-content">
              <div class="contract-no">合同编号：{{ projectDetail.no }}</div>
              <el-form label-width="100px" class="detail-form">
                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="项目名称">
                      <el-input v-model="projectDetail.pname" disabled />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="项目采购方式">
                      <el-input v-model="projectDetail.projectFrom" disabled />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="客户类型">
                      <el-input v-model="projectDetail.customerType" disabled />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="客户单位">
                      <el-input v-model="projectDetail.customer" disabled />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="项目领域">
                      <el-input v-model="projectDetail.projectArea" disabled />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="项目负责人">
                      <el-input v-model="projectDetail.salesman" disabled />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="存量类型">
                      <el-input v-model="projectDetail.stockType" disabled />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="执行时间">
                      <el-input v-model="projectDetail.duration" disabled />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="项目成本">
                      <el-input v-model="projectDetail.cost" disabled />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="合同金额">
                      <el-input v-model="projectDetail.money" disabled>
                        <template slot="append">元</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="实际收入">
                      <el-input v-model="projectDetail.income" disabled>
                        <template slot="append">元</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="是否到账">
                      <el-input v-model="projectDetail.isAccount" disabled />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="12">
                    <el-form-item label="到账金额">
                      <el-input v-model="projectDetail.receiveMoney" disabled>
                        <template slot="append">元</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="项目奖励">
                      <el-input v-model="projectDetail.manageRate" disabled>
                        <template slot="append">%</template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="0">
                  <el-col :span="24">
                    <el-form-item label="内容及要求">
                      <el-input
                        v-model="projectDetail.content"
                        type="textarea"
                        :rows="4"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </el-card>

        <el-card style="margin-top: 20px">
          <div>
            <div class="project-type">
              <div class="type-title">项目类型</div>
              <el-table
                :header-cell-style="{ background: '#f5f7fa' }"
                :data="projectDetail.list || []"
                border
                style="width: 100%"
              >
                <el-table-column
                  prop="platform"
                  label="平台产品IP"
                  width="120"
                  align="center"
                />
                <el-table-column
                  prop="department"
                  label="执行事业部"
                  width="150"
                  align="center"
                />
                <el-table-column
                  prop="content"
                  label="执行内容及要求"
                  width="300"
                  align="center"
                />
                <el-table-column prop="attribute" label="属性" align="center" />
                <el-table-column prop="money" label="金额" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.money || "0" }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="estimatedCost"
                  label="成本"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.estimatedCost || "0" }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="transferCompany"
                  label="划转对象"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.transferCompany || "无" }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="transferMoney"
                  label="划转金额"
                  align="center"
                >
                  <template slot-scope="scope">
                    {{ scope.row.transferMoney || "0" }}
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="transferExplain" label="划转说明">
                  <template slot-scope="scope">
                    {{ scope.row.transferExplain || "0" }}
                  </template>
                </el-table-column> -->
              </el-table>
            </div>
          </div>
        </el-card>

        <el-card style="margin-top: 20px">
          <div style="border: 2px solid #ebeef5">
            <div class="contract-info">
              <div class="info-item">
                <div class="info-label">合同电子版</div>
                <div class="info-content">
                  <a
                    v-if="projectDetail.contractFile"
                    :href="projectDetail.contractFile"
                    class="download-link"
                    @click.prevent="
                      handleFileDownload(projectDetail.contractFile)
                    "
                  >
                    {{ getFileName(projectDetail.contractFile) }}(点击下载文件)
                  </a>
                  <div class="button-group">
                    <el-button
                      type="primary"
                      size="small"
                      @click="handleFileDownload(projectDetail.contractFile)"
                      >下载</el-button
                    >
                    <el-button size="small" @click="handlePreview"
                      >预览</el-button
                    >
                  </div>
                </div>
              </div>
              <div class="info-item">
                <div class="info-label">负责人备注</div>
                <div class="info-content">
                  {{ projectDetail.remarks || "" }}
                </div>
              </div>

              <div class="info-section">
                <div style="border: 1px solid #ccc">
                  <div class="info-row">
                    <div class="info-col">
                      <div
                        class="info-label"
                        style="width: 180px; color: black; font-weight: bold"
                      >
                        项目立项意见
                      </div>
                      <div class="info-content">
                        {{
                          projectDetail.lsuggest
                            ? `${projectDetail.luser}：${
                                projectDetail.lsuggest || ""
                              }`
                            : ""
                        }}
                      </div>
                    </div>
                    <!-- <div class="info-col">
                      <div class="info-label">项目立项人</div>
                      <div class="info-content">
                        {{ projectDetail.luser || "" }}
                      </div>
                    </div> -->
                  </div>
                </div>

                <div style="border: 1px solid #ccc">
                  <div class="info-row full-width">
                    <div class="info-label">完成概述</div>
                    <div class="info-content">
                      {{ projectDetail.describe || "" }}
                    </div>
                  </div>

                  <div class="info-row">
                    <div class="info-col">
                      <div class="info-label">结案人</div>
                      <div class="info-content">
                        {{ projectDetail.createName || projectDetail.salesman }}
                      </div>
                    </div>
                    <div class="info-col">
                      <div class="info-label">结案时间</div>
                      <div class="info-content">
                        {{ formatCreateTime(projectDetail.createTime) || "" }}
                      </div>
                    </div>
                  </div>
                </div>

                <div style="border: 1px solid #ccc">
                  <div class="info-row full-width">
                    <div class="info-col">
                      <div class="info-label">融合发展事业部意见</div>
                      <div class="info-content">
                        {{
                          projectDetail.rmSuggest
                            ? `${projectDetail.rmUserName}：${
                                projectDetail.rmSuggest || ""
                              }`
                            : ""
                        }}
                      </div>
                    </div>
                    <div class="info-col">
                      <div class="info-label">审批时间</div>
                      <div class="info-content">
                        {{ formatCreateTime(projectDetail.rmUserTime) || "" }}
                      </div>
                    </div>
                  </div>

                  <!-- <div class="info-row">
                    <div class="info-col">
                      <div class="info-label">审批人</div>
                      <div class="info-content">
                        {{ projectDetail.rmUserName || "" }}
                      </div>
                    </div>
                    <div class="info-col">
                      <div class="info-label">审批时间</div>
                      <div class="info-content">
                        {{ formatCreateTime(projectDetail.rmUserTime) || "" }}
                      </div>
                    </div>
                  </div> -->
                </div>

                <div style="border: 1px solid #ccc">
                  <div class="info-row three-cols">
                    <div class="info-col">
                      <div class="info-label">项目成本</div>
                      <div class="info-content">
                        {{ projectDetail.cost || "0" }}元
                      </div>
                    </div>
                    <div class="info-col">
                      <div class="info-label">项目税金</div>
                      <div class="info-content">
                        {{ projectDetail.tax || "0" }}元
                      </div>
                    </div>
                    <div class="info-col">
                      <div class="info-label">项目收入</div>
                      <div class="info-content">
                        {{ projectDetail.income || "0" }}元
                      </div>
                    </div>
                  </div>

                  <div class="info-row">
                    <div class="info-col">
                      <div class="info-label">项目奖励</div>
                      <div class="info-content">
                        {{ projectDetail.manageMoney || "0" }}元
                      </div>
                    </div>
                    <!-- <div class="info-col">
                    <div class="info-label">融合发展事业部意见</div>
                    <div class="info-content">{{ projectDetail.rmSuggest || "" }}</div>
                  </div> -->
                  </div>
                </div>

                <div style="border: 1px solid #ccc">
                  <div class="info-row full-width">
                    <div class="info-col">
                      <div class="info-label">运营中心意见</div>
                      <div class="info-content">
                        {{
                          projectDetail.rcenterSuggest
                            ? `${projectDetail.rcenterUserName}：${
                                projectDetail.rcenterSuggest || ""
                              }`
                            : ""
                        }}
                      </div>
                    </div>
                    <div class="info-col">
                      <div class="info-label">审批时间</div>
                      <div class="info-content">
                        {{
                          formatCreateTime(projectDetail.rcenterUserTime) || ""
                        }}
                      </div>
                    </div>
                  </div>

                  <!-- <div class="info-row">
                    <div class="info-col">
                      <div class="info-label">审批人</div>
                      <div class="info-content">
                        {{ projectDetail.rcenterUserName || "" }}
                      </div>
                    </div>
                    <div class="info-col">
                      <div class="info-label">审批时间</div>
                      <div class="info-content">
                        {{
                          formatCreateTime(projectDetail.rcenterUserTime) || ""
                        }}
                      </div>
                    </div>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <!-- 时间线部分（始终显示） -->
      <el-card style="margin-top: 20px">
        <div>
          <div class="timeline-section">
            <el-timeline>
              <el-timeline-item
                :timestamp="formatCreateTime(projectDetail.createTime)"
                placement="top"
                type="primary"
              >
                <el-card>
                  <h4>负责人已填报</h4>
                  <p>
                    操作人：{{
                      projectDetail.createName || projectDetail.salesman
                    }}
                  </p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
        <el-button v-print="printObj" type="primary">打印</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addAccountApi,
  addInvoicingApi,
  selAccountListApi,
  selAccountListByIdApi,
  selInvoicingListByIdApi,
  accountExcelApi,
} from "@/api/account_manage";
import { selCustomerUnitListApi } from "@/api/basic-data";
import { uploadFileApi, selFileUrlApi, selTemplateApi } from "@/api/uploadFile";
import { mapGetters } from "vuex";
// import {
//   addProjectApi,
//   getProjectTypesApi,
//   getProjectAreasApi,
//   getCustomerUnitsApi,
//   getProjectFromsApi,
// } from "@/api/project-input";
export default {
  name: "PaymentQuery",
  data() {
    return {
      tableData: [
        {
          id: 1,
          contractNo: "202502051",
          projectName: "宁波市北仑区妇女联合会年度合作协议（妇联）",
          customerUnit: "宁波市北仑区妇女联合会",
          projectManager: "周永声",
          contractAmount: 48000,
          contractToAccount: 0,
          contractReceivable: 48000,
          accountAmount: 0,
          invoiceAmount: 0,
          invoiceToAccount: 0,
          invoiceReceivable: 0,
          createTime: "2025-02-05 10:56",
        },
        {
          id: 2,
          contractNo: "202501221",
          projectName: "青田年统留守儿童北仑研学活动策划合作协议",
          customerUnit: "宁波北仑圆满旅行社有限责任公司",
          projectManager: "张佳丽",
          contractAmount: 4000,
          contractToAccount: 4000,
          contractReceivable: 4000,
          accountAmount: 4000,
          invoiceAmount: 0,
          invoiceToAccount: 4000,
          invoiceReceivable: 0,
          createTime: "2025-01-22 00:00",
        },
        {
          id: 3,
          contractNo: "202501202",
          projectName: "教育局少儿春晚合作协议",
          customerUnit: "宁波市北仑区教育局",
          projectManager: "张佳丽",
          contractAmount: 30000,
          contractToAccount: 30000,
          contractReceivable: 30000,
          accountAmount: 30000,
          invoiceAmount: 0,
          invoiceToAccount: 30000,
          invoiceReceivable: 0,
          createTime: "2025-01-20 14:23",
        },
        {
          id: 4,
          contractNo: "202501172",
          projectName: "白峰街道90、00多村共富记视频策划合作协议",
          customerUnit: "宁波市北仑区人民政府白峰街道办事处",
          projectManager: "郑颖超",
          contractAmount: 20000,
          contractToAccount: 0,
          contractReceivable: 20000,
          accountAmount: 0,
          invoiceAmount: 0,
          invoiceToAccount: 0,
          invoiceReceivable: 0,
          createTime: "2025-01-17 19:53",
        },
      ],
      queryParams: {
        projectName: "",
        customerUnit: "",
        contractNo: "",
        accountStatus: "",
      },
      // 是否到账
      accountOptions: [
        { label: "未到账", value: "未到账" },
        { label: "部分到账", value: "部分到账" },
        { label: "已到账", value: "已到账" },
      ],
      isFilterVisible: false,
      detailDialogVisible: false,
      // 到账管理查询参数
      selAccountListQuery: {
        page: 1,
        pageSize: 10,
        customer: "",
        isAccount: "",
        no: "",
        PName: "",
      },
      // 客户类型列表参数
      selCustomerTypeListQuery: {
        page: 1,
        pageSize: 10,
        name: "",
      },
      // 到账金额
      accountAmountList: {},
      // 到账填写弹框
      accountDialogVisible: false,
      // 到账详情弹窗
      accountDetailDialogVisible: false,
      // 到账详情数据
      accountDetailData: [],
      currentRow: {},
      userId: "",
      // 到账填写
      accountForm: {
        money: "", // 金额
        remark: "", // 备注
        pid: "", // 合同id
        userId: this.$store.getters.userId,
      },
      // 到账填写列表
      accountFillList: [],
      accountRules: {
        money: [
          { required: true, message: "请输入到账金额", trigger: "blur" },
          // {
          //   validator: (rule, value, callback) => {
          //     if (!value && value !== 0) {
          //       callback(new Error("请输入到账金额"));
          //     } else if (value <= 0) {
          //       callback(new Error("到账金额必须大于0"));
          //     } else if (
          //       this.currentRow &&
          //       value >
          //         this.currentRow.contractAmount -
          //           this.currentRow.contractToAccount
          //     ) {
          //       callback(new Error("到账金额不能大于剩余应收款"));
          //     } else {
          //       callback();
          //     }
          //   },
          //   trigger: "blur",
          // },
        ],
        // remark: [
        //   { required: true, message: "请输入备注信息", trigger: "blur" },
        // ],
      },
      // 到账详情
      invoiceDialogVisible: false,
      // 开票详情
      invoiceDetailDialogVisible: false,
      // 开票详情数据
      invoiceDetailData: [],
      // 开票填写
      invoiceForm: {
        money: "",
        remark: "",
        pid: "",
        userId: this.$store.getters.userId,
      },
      invoiceRules: {
        money: [
          { required: true, message: "请输入开票金额", trigger: "blur" },
          // {
          //   validator: (rule, value, callback) => {
          //     if (!value && value !== 0) {
          //       callback(new Error("请输入开票金额"));
          //     } else if (value <= 0) {
          //       callback(new Error("开票金额必须大于0"));
          //     } else if (
          //       this.currentRow &&
          //       value >
          //         this.currentRow.contractAmount - this.currentRow.invoiceAmount
          //     ) {
          //       callback(new Error("开票金额不能大于剩余可开票金额"));
          //     } else {
          //       callback();
          //     }
          //   },
          //   trigger: "blur",
          // },
        ],
        // remark: [
        //   { required: true, message: "请输入备注信息", trigger: "blur" },
        // ],
      },
      // 新增/编辑弹窗
      dialogTitle: "",
      formData: {
        pType: "",
        projectFrom: "",
        no: "",
        pName: "",
        customerType: "",
        customer: "",
        money: 0,
        duration: [],
        projectArea: "",
        stockType: "",
        salesman: "",
        manageRate: "",
        content: "",
        lppStr: [{ platform: "", department: "", content: "" }],
      },
      rules: {
        pType: [
          { required: true, message: "请选择项目类型", trigger: "change" },
        ],
        projectFrom: [
          { required: true, message: "请选择项目采购方式", trigger: "change" },
        ],
        no: [{ required: true, message: "请输入合同编号", trigger: "blur" }],
        pName: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
        customerType: [
          { required: true, message: "请选择客户类型", trigger: "change" },
        ],
        customer: [
          { required: true, message: "请选择客户单位", trigger: "change" },
        ],
        money: [{ required: true, message: "请输入金额", trigger: "blur" }],
        duration: [
          { required: true, message: "请选择执行时间", trigger: "change" },
        ],
        salesman: [
          { required: true, message: "请输入项目负责人", trigger: "blur" },
        ],
      },
      projectTypes: [], // 项目类型选项
      projectFroms: [], // 项目来源选项
      customerUnits: [], // 客户单位选项
      projectAreas: [], // 项目领域选项
      durationForSubmit: "", // 处理后的执行时间
      projectDetail: {}, // 项目详情
      printObj: {
        id: "printArea",
        popTitle: "到账查询详情",
        preview: false,
        extraCss: "",
        beforeEntryIframe() {
          try {
            // 获取打印区域
            const printArea = document.getElementById("printArea");
            if (!printArea) return;

            // 添加更强制的边框样式
            const styleElement = document.createElement("style");
            styleElement.id = "print-style-temp";
            styleElement.textContent = `
              /* 整个表格添加边框 */
              #printArea .el-table {
                border: 1px solid #dcdfe6 !important;
                border-collapse: collapse !important;
                border-spacing: 0 !important;
              }
              
              /* 特别强制的单元格边框样式 */
              #printArea .el-table th.el-table__cell,
              #printArea .el-table td.el-table__cell {
                border-top: 1px solid #dcdfe6 !important;
                border-right: 1px solid #dcdfe6 !important;
                border-bottom: 1px solid #dcdfe6 !important;
                border-left: 1px solid #dcdfe6 !important;
              }
              
              /* 确保表头背景色 */
              #printArea .el-table th.el-table__cell {
                background-color: #f5f7fa !important;
              }
              
              /* 移除干扰元素 */
              #printArea .el-table::before,
              #printArea .el-table::after,
              #printArea .el-table .el-table__fixed::before,
              #printArea .el-table .el-table__fixed::after {
                display: none !important;
              }
            `;
            document.head.appendChild(styleElement);

            // 处理表格宽度和列组
            const tableNode = printArea.querySelectorAll(
              ".el-table__header,.el-table__body"
            );
            tableNode.forEach((tableItem) => {
              // 强制表格宽度为100%
              if (tableItem.style) {
                tableItem.style.width = "100%";
                tableItem.style.tableLayout = "fixed";
              }

              // 处理表格内的列宽
              const colgroups = tableItem.querySelectorAll("colgroup");
              colgroups.forEach((colgroup) => {
                const cols = colgroup.querySelectorAll("col");
                let totalWidth = 0;
                let colCount = 0;

                // 计算列宽总和
                cols.forEach((col) => {
                  const width = parseInt(col.getAttribute("width") || "0");
                  if (width > 0) {
                    totalWidth += width;
                    colCount++;
                  }
                });

                // 调整列宽比例
                if (totalWidth > 0) {
                  cols.forEach((col) => {
                    const width = parseInt(col.getAttribute("width") || "0");
                    if (width > 0) {
                      const ratio = (width / totalWidth) * 100;
                      col.style.width = ratio + "%";
                    }
                  });
                }
              });
            });

            // 处理表格内单元格样式
            setTimeout(() => {
              const cells = printArea.querySelectorAll(
                ".el-table__body td.el-table__cell, .el-table__header th.el-table__cell"
              );
              cells.forEach((cell) => {
                // 确保边框可见
                cell.style.border = "1px solid #dcdfe6";

                // 处理单元格内容
                const cellContent = cell.querySelector(".cell");
                if (cellContent) {
                  cellContent.style.whiteSpace = "normal";
                  cellContent.style.wordBreak = "break-word";
                  cellContent.style.padding = "5px";
                }
              });
            }, 200);
          } catch (error) {
            console.error("Error in beforeEntryIframe:", error);
          }
        },
        closeCallback(vue) {
          console.log("关闭了打印工具");
          // 移除临时样式
          const tempStyle = document.getElementById("print-style-temp");
          if (tempStyle) {
            tempStyle.parentNode.removeChild(tempStyle);
          }
        },
      },
    };
  },
  computed: {
    ...mapGetters(["userId"]),
  },
  created() {
    this.selAccountList();
    this.selCustomerUnitList();
    console.log(this.userId);
  },
  methods: {
    // 客户单位列表查询
    async selCustomerUnitList() {
      const res = await selCustomerUnitListApi(this.selCustomerTypeListQuery);
      console.log(res);
      this.customerUnits = res.records;
    },
    // 格式化创建时间
    formatCreateTime(time) {
      if (!time) return "-";
      return time.substring(0, 16); // 只显示到分钟
    },

    // 到账管理查询
    async selAccountList() {
      this.loading = true;
      try {
        const res = await selAccountListApi(this.selAccountListQuery);
        console.log("查询结果：", res);
        this.accountFillList = res.records || [];
        this.total = res.total || 0;
      } catch (error) {
        console.error("查询失败：", error);
        this.$message.error("查询失败");
      } finally {
        this.loading = false;
      }
    },
    // 处理是否到账
    handleAccountStatusChange(val) {
      console.log("是否到账", val);
      this.selAccountList();
    },
    // 查看详情弹框
    handleView(row) {
      console.log("查看详情", row);
      this.detailDialogVisible = true;
      this.projectDetail = row;
      console.log(this.projectDetail);
    },
    // 打开到账填写弹框
    openAccountDialog(row) {
      this.accountAmountList = row;
      console.log(this.accountAmountList);
      this.accountForm.pid = row.id;
      this.accountDialogVisible = true;
    },
    // 打开到账详情弹窗
    async handleAccountDetail(id) {
      this.accountDetailDialogVisible = true;
      const res = await selAccountListByIdApi(id);
      console.log("到账详情", res);
      this.accountDetailData = res.data || [];
    },
    // 提交到账信息
    async handleAccountSubmit() {
      try {
        const res = await addAccountApi(this.accountForm);
        console.log(res);
        this.$message.success("提交成功");
        this.accountDialogVisible = false;
        // 刷新列表数据
        this.selAccountList();
      } catch (error) {
        console.error(error);
        this.$message.error("提交失败");
      }
    },
    // 弹框关闭后重置表单
    handleAccountDialogClosed() {
      this.$refs.accountFormRef.resetFields();
      this.accountForm = {
        money: "",
        remark: "",
        pid: "",
        userId: this.$store.getters.userId,
      };
    },
    // 打开开票填写弹框
    openInvoiceDialog(row) {
      console.log(row);
      this.currentRow = row;
      this.invoiceForm.pid = row.id;
      this.invoiceDialogVisible = true;
    },
    // 提交开票信息
    async handleInvoiceSubmit() {
      try {
        const res = await addInvoicingApi(this.invoiceForm);
        console.log(res);
        this.$message.success("提交成功");
        this.invoiceDialogVisible = false;
        this.invoiceForm = {
          money: "",
          remark: "",
          pid: "",
          userId: this.$store.getters.userId,
        };
        // 刷新列表数据
        this.selAccountList();
      } catch (error) {
        console.error(error);
        this.$message.error("提交失败");
      }
    },
    // 打开开票详情弹窗
    async handleInvoiceDetail(id) {
      this.invoiceDetailDialogVisible = true;
      const res = await selInvoicingListByIdApi(id);
      console.log("开票详情", res);
      this.invoiceDetailData = res.data || [];
    },
    // 开票弹框关闭后重置表单
    handleInvoiceDialogClosed() {
      this.$refs.invoiceFormRef.resetFields();
      this.invoiceForm = {
        money: "",
        remark: "",
        pid: "",
        userId: this.$store.getters.userId,
      };
      this.currentRow = {};
    },
    // 处理分页大小变化
    handleSizeChange(val) {
      this.selAccountListQuery.pageSize = val;
      this.selAccountList();
    },
    // 处理当前页变化
    handleCurrentChange(val) {
      this.selAccountListQuery.page = val;
      this.selAccountList();
    },
    // 处理客户单位变化
    handleCustomerChange(val) {
      console.log(val);
      this.selAccountList();
    },
    // 搜索
    handleQuery() {
      this.selAccountListQuery.page = 1;
      this.selAccountList();
    },
    // 重置查询
    resetQuery() {
      this.selAccountListQuery = {
        page: 1,
        pageSize: 10,
        customer: "",
        isAccount: "",
        no: "",
        PName: "",
      };
      this.selAccountList();
    },
    // 处理执行时间变化
    handleDurationChange(val) {
      if (val) {
        this.durationForSubmit = val.join(" - ");
      } else {
        this.durationForSubmit = "";
      }
    },
    // 获取文件名
    getFileName(url) {
      if (!url) return "";
      // 截取_后面的部分作为文件名
      console.log(url.split("_").pop());
      return url.split("_").pop();
    },
    // 处理文件下载
    handleFileDownload(url) {
      if (!url) {
        this.$message.warning("文件链接不存在");
        return;
      }

      // 拼接完整的下载地址
      // const baseUrl = "http://192.168.11.22:38085";
      const baseUrl = "http://192.168.11.2:8081";
      const fullUrl = `${baseUrl}${url}`;

      // 获取文件名 - 截取_后面的部分
      const fileName = url.split("_").pop();
      console.log(fullUrl);

      try {
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = fullUrl;
        link.setAttribute("download", fileName); // 使用新的文件名
        document.body.appendChild(link);

        link.click();

        document.body.removeChild(link);
      } catch (error) {
        console.error("下载失败:", error);
        this.$message.error("下载失败，请重试");
      }
    },
    // 处理文件预览
    async handlePreview() {
      if (!this.projectDetail.contractFile) {
        this.$message.warning("文件链接不存在");
        return;
      }
      try {
        // 获取预览链接
        const res = await selFileUrlApi(this.projectDetail.contractFile);
        console.log(res);
        if (res.code === 1 && res.data) {
          // 在新窗口中打开预览链接
          window.open(res.data, "_blank");
        } else {
          this.$message.error(res.msg || "获取预览链接失败");
        }
      } catch (error) {
        console.error("预览失败:", error);
        this.$message.error("预览失败，请重试");
      }
    },

    handlePrintDetail() {
      try {
        window.jQuery("#printArea").print({
          title: "到账查询详情",
          stylesheet: null,
          deferred: window.jQuery.Deferred().done(function () {
            console.log("打印完成");
          }),
        });
      } catch (error) {
        console.error("打印失败:", error);
        this.$message.error("打印失败，请重试");
      }
    },
    // 处理导出Excel
     handleExportExcel() {
      let loading = null;
      try {
        this.$confirm("此操作将导出所有到账查询数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            // 显示loading
            loading = this.$loading({
              lock: true,
              text: "正在导出数据,请稍候...",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });

            // 调用accountExcelApi函数
            const res = await accountExcelApi();
            console.log("导出成功", res);

            if (res.code === 1 && res.data) {
              // 创建a标签下载
              const link = document.createElement("a");
              link.href = res.data;
              link.download = "到账查询数据.xlsx";
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link);
              this.$message.success("导出成功");
            } else {
              this.$message.error(res.msg || "导出失败");
            }
          })
          .catch(() => {
            this.$message.info("已取消导出");
          })
          .finally(() => {
            // 关闭loading
            if (loading) {
              loading.close();
            }
          });
      } catch (error) {
        console.error("导出失败", error);
        this.$message.error("导出失败");
        // 关闭loading
        if (loading) {
          loading.close();
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.operation-container {
  margin-bottom: 20px;
}

.dialog-title {
  height: 60px;
  text-align: center;
  // line-height: 100px;
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}

.operation-container .el-button {
  margin-right: 10px;
}

.search-wrapper {
  margin-bottom: 20px;
}

.filter-trigger .el-icon-arrow-down {
  margin-left: 5px;
  transition: transform 0.3s;
}

.filter-trigger .el-icon-arrow-down.is-reverse {
  transform: rotate(180deg);
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 确保表格内容不会被截断 */
.el-table .cell {
  white-space: nowrap;
}

.form-row {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 15px;
}

:deep(.el-form-item) {
  margin-right: 15px;
  margin-bottom: 0;
}

:deep(.el-form-item__label) {
  color: #606266;
}

:deep(.el-form-item__content) {
  width: 180px;
}

:deep(.el-input),
:deep(.el-select) {
  width: 100%;
}

/* 确保select的宽度也是180px */
:deep(.el-select .el-input) {
  width: 100%;
}

/* 重置 form-item 的样式 */
:deep(.el-form--inline .el-form-item) {
  display: flex;
  align-items: center;
}

:deep(.el-form-item__label) {
  float: none;
  line-height: 1;
  padding: 0 8px 0 0;
}

:deep(.el-form-item__content) {
  margin-left: 0 !important;
  line-height: 1;
}

/* 按钮样式 */
.el-button {
  margin-left: 10px;
}

/* 输入框样式 */
:deep(.el-input__inner) {
  border-radius: 2px;
}

.project-type-section {
  margin-top: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-left: 12px;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background-color: #1e6ced;
  border-radius: 2px;
}

.dialog-footer {
  /* text-align: center; */
}

:deep(.el-dialog__body) {
  padding: 20px 30px;
}

:deep(.el-form-item__label) {
  font-weight: normal;
}

:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-table .el-input) {
  width: 100%;
}

:deep(.el-table .el-select) {
  width: 100%;
}

.upload-section {
  margin: 20px 0;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-left: 12px;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background-color: #1e6ced;
  border-radius: 2px;
}

.upload-box {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  text-align: center;
  padding: 20px;
  background-color: #fafafa;
}

:deep(.el-upload-dragger) {
  width: 100%;
  height: 180px;
}

:deep(.el-upload__text) {
  color: #606266;
  font-size: 14px;
  margin-top: 10px;
}

:deep(.el-upload__text em) {
  color: #409eff;
  font-style: normal;
}

:deep(.el-upload__tip) {
  font-size: 12px;
  color: #909399;
  margin-top: 10px;
}

/* 备注文本域样式 */
:deep(.el-textarea__inner) {
  min-height: 80px;
}

.detail-dialog {
  :deep(.el-dialog__header) {
    padding: 15px 20px;
    margin: 0;
    border-bottom: 1px solid #ebeef5;
  }

  :deep(.el-dialog__body) {
    padding: 0;
  }

  :deep(.el-collapse) {
    border: none;
  }

  :deep(.el-collapse-item__header) {
    height: auto;
    line-height: normal;
    padding: 20px;
    background: none;
  }
}

.collapse-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #303133;

  .view-btn {
    color: #409eff;
    font-size: 14px;
    cursor: pointer;
  }
}

.timeline-section {
  padding: 20px;
  background: #fff;

  :deep(.el-timeline) {
    padding-left: 0;
  }

  :deep(.el-timeline-item__node--normal) {
    left: 0;
  }

  :deep(.el-timeline-item__wrapper) {
    padding-left: 25px;
  }

  :deep(.el-timeline-item__timestamp) {
    color: #909399;
    font-size: 14px;
  }
}

.timeline-content {
  .status-text {
    color: #303133;
    font-size: 14px;
    margin-bottom: 4px;
  }

  .operator-text {
    color: #606266;
    font-size: 14px;
  }
}
.amount-text {
  color: red;
  font-weight: bold;
  font-size: 18px;
}
.detail-content {
  background: #fff;
  border: 1px solid #ebeef5;
  margin-top: 20px;

  .contract-no {
    color: #409eff;
    font-size: 14px;
    margin: 20px;
  }
}

.detail-form {
  :deep(.el-form-item) {
    margin-bottom: 0;
  }

  :deep(.el-form-item__label) {
    background-color: #f5f7fa;
    padding: 12px;
    height: auto;
    line-height: 20px;
    border: 1px solid #ebeef5;
    border-left: none;
    border-right: 1px solid #ebeef5;
  }

  :deep(.el-form-item__content) {
    padding: 0;
    margin-left: 100px !important;

    .form-content {
      padding: 12px;
      line-height: 20px;
      min-height: 44px;
      display: flex;
      align-items: center;
      border: 1px solid #ebeef5;
      border-left: none;
      border-right: none;
    }
  }

  :deep(.el-col) {
    &:last-child {
      .form-content {
        border-right: none;
      }
    }
  }

  .content-text {
    line-height: 1.8;
    color: #303133;
    padding: 12px;
    border: 1px solid #ebeef5;
    border-left: none;
    border-right: none;
  }
}

// 内容及要求特殊处理
:deep(.el-form-item--content) {
  .el-form-item__content {
    border-top: 1px solid #ebeef5;
  }
}

.dialog-footer {
  text-align: right;
  padding: 10px 20px;
  border-top: 1px solid #ebeef5;
}

.project-type {
  margin-top: 20px;

  .type-title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 20px;
    padding-left: 10px;
    border-left: 4px solid #409eff;
  }

  :deep(.el-table) {
    th {
      background-color: #f5f7fa;
      color: #606266;
      padding: 8px 0;
      font-weight: normal;
    }

    td {
      padding: 8px;
      color: #606266;
    }

    &::before,
    &::after {
      background-color: #ebeef5;
    }

    .el-table__cell {
      border-color: #ebeef5;
    }
  }

  .contract-info {
    margin-top: 20px;
    border: 1px solid #ebeef5;
    border-radius: 4px;

    .info-item {
      display: flex;
      border-bottom: 1px solid #ebeef5;

      &:last-child {
        border-bottom: none;
      }

      .info-label {
        width: 120px;
        padding: 12px;
        background-color: #f5f7fa;
        color: #606266;
        font-size: 14px;
        border-right: 1px solid #ebeef5;
      }

      .info-content {
        flex: 1;
        padding: 12px;
        min-height: 44px;
        display: flex;
        align-items: center;
        color: #606266;
        font-size: 14px;

        &:has(.download-link) {
          justify-content: space-between;
        }

        .download-link {
          color: #409eff;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }

        .button-group {
          .el-button {
            margin-left: 10px;
          }
        }
      }
    }
  }
}

// 设置弹框高度和内部滚动
:deep(.full-height-dialog) {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20%; // 因为宽度是60%，所以左边距20%
  right: 20%;
  height: 100%;
  max-height: 100%;

  .el-dialog__body {
    flex: 1;
    overflow: hidden;
    padding: 0;
  }

  .dialog-content-wrapper {
    height: 100%;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
  }
}

// 修改弹框header样式
:deep(.el-dialog__header) {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
  margin-right: 0;
}

// 修改弹框footer样式
:deep(.el-dialog__footer) {
  padding: 20px;
  border-top: 1px solid #ebeef5;
  background: #fff;
}

// 隐藏外部滚动条
.detail-dialog {
  :deep(.el-dialog) {
    margin: 0 !important;
  }
}

/* 添加禁用输入框的样式 */
:deep(.el-input.is-disabled .el-input__inner) {
  color: #303133;
  background-color: #fff;
  border-color: #dcdfe6;
}

:deep(.el-textarea.is-disabled .el-textarea__inner) {
  color: #303133;
  background-color: #fff;
  border-color: #dcdfe6;
}

.collapse-header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #303133;

  .view-btn {
    color: #409eff;
    font-size: 14px;
    cursor: pointer;
  }
}

.detail-content {
  background: #fff;
  // border: 2px solid #ebeef5;
  // margin-top: 20px;

  .contract-no {
    color: #1b86ee;
    font-size: 16px;
    margin: 20px;
  }
}

.project-type {
  margin-top: 20px;

  .type-title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 20px;
    padding-left: 10px;
    border-left: 4px solid #409eff;
  }

  :deep(.el-table) {
    th {
      background-color: #f5f7fa;
      color: #606266;
      padding: 8px 0;
      font-weight: normal;
    }

    td {
      padding: 8px;
      color: #606266;
    }

    &::before,
    &::after {
      background-color: #ebeef5;
    }

    .el-table__cell {
      border-color: #ebeef5;
    }
  }

  .contract-info {
    // margin-top: 40px;
    // border: 2px solid #ebeef5;
    border-radius: 4px;

    .info-item {
      display: flex;
      border-bottom: 1px solid #ebeef5;

      &:last-child {
        border-bottom: none;
      }

      .info-label {
        width: 120px;
        padding: 12px;
        background-color: #f5f7fa;
        // color: #606266;
        color: black;
        font-size: 14px;
        border-right: 1px solid #ebeef5;
      }

      .info-content {
        flex: 1;
        padding: 12px;
        min-height: 44px;
        display: flex;
        align-items: center;
        color: #606266;
        font-size: 14px;

        &:has(.download-link) {
          justify-content: space-between;
        }

        .download-link {
          color: #409eff;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }

        .button-group {
          .el-button {
            margin-left: 10px;
          }
        }
      }
    }
  }
}

.type-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  // margin-bottom: 20px;
  padding-left: 10px;
  border-left: 4px solid #409eff;
}

.contract-upload-section {
  margin: 20px 0;

  .section-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
    color: #303133;
  }

  .upload-box {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &:hover {
      border-color: #409eff;
    }
  }
}

.section-title {
  margin-top: 20px;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-left: 12px;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background-color: #1e6ced;
  border-radius: 2px;
}

.contract-upload-section {
  margin: 20px 0;

  .section-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
    color: #303133;
  }

  .upload-box {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &:hover {
      border-color: #409eff;
    }
  }
}

.contract-info {
  border-radius: 4px;
  margin-top: 0; // 添加这行来覆盖可能继承的margin
  .info-item {
    display: flex;
    border-bottom: 1px solid #ebeef5;

    &:last-child {
      border-bottom: none;
    }

    .info-label {
      width: 130px;
      padding: 12px;
      background-color: #f5f7fa;
      // color: #606266;
      color: black;
      font-size: 14px;
      border-right: 1px solid #ebeef5;
    }

    .info-content {
      flex: 1;
      padding: 12px;
      min-height: 44px;
      display: flex;
      align-items: center;
      color: #606266;
      font-size: 14px;

      &:has(.download-link) {
        justify-content: space-between;
      }

      .download-link {
        color: #409eff;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }

      .button-group {
        .el-button {
          margin-left: 10px;
        }
      }
    }
  }
}

/* 添加打印样式 */
@media print {
  #printArea {
    width: 100% !important;

    .el-table {
      width: 100% !important;

      /* 表格容器样式 */
      .el-table__inner-wrapper,
      .el-table__header-wrapper,
      .el-table__body-wrapper {
        width: 100% !important;
      }

      /* 表格主体样式 */
      .el-table__header,
      .el-table__body {
        width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
      }

      /* 单元格样式 */
      .el-table__cell {
        border: 1px solid #dcdfe6 !important;
        padding: 8px !important;
      }

      /* 表头样式 */
      .el-table__header th {
        background-color: #f5f7fa !important;
        font-weight: bold !important;
      }
    }
  }

  /* 隐藏不需要打印的元素 */
  .el-button,
  .dialog-footer,
  .el-pagination,
  .operation-container,
  .search-wrapper {
    display: none !important;
  }
}

.info-section {
  // padding: 20px;
  background: #fff;

  .info-row {
    display: flex;
    margin-bottom: 1px;

    &.full-width {
      .info-label {
        width: 180px;
        color: black;
        font-weight: bold;
      }
      .info-content {
        flex: 1;
        color: black;
      }
    }

    &.three-cols {
      .info-col {
        flex: 1;
        margin-right: 1px;
        &:last-child {
          margin-right: 0;
        }
      }
    }

    .info-col {
      display: flex;
      flex: 1;
      margin-right: 1px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .info-label {
    width: 100px;
    // padding: 12px 20px;
    padding: 12px;
    background-color: #f5f7fa;
    color: black;
    font-size: 14px;
    border: 1px solid #ebeef5;
    display: flex;
    align-items: center;
  }

  .info-content {
    padding: 12px 20px;
    min-height: 44px;
    border: 1px solid #ebeef5;
    border-left: none;
    display: flex;
    align-items: center;
    color: black;
    font-size: 14px;
    flex: 1;
  }
}
</style>
